import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup
} from 'unocss'

export default defineConfig({
    // 定义原子 CSS 实用程序
    rules: [
        // [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
        // [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
    ],
    // 将多个规则组合成一个简写形式
    shortcuts: [],
    // 定义主题变量
    theme: {
        colors: {
            // ...
        }
    },
    // 自定义函数改变主题对象。 也可以返回一个新的主题对象来完全替换原始主题对象。
    extendTheme: [],
    // 将自定义约定应用于规则
    variants: [],
    // 定义全局原始 CSS
    preflights: [],
    // 定义每个实用程序层的顺序
    layers: {},
    // 将图层输出至 CSS 级联图层
    outputToCssLayers: false,
    // 自定义函数对图层进行排序
    sortLayers: undefined,
    // 常见用例的预定义配置
    presets: [
        // 默认预设
        presetUno(),
        // 由 Iconify 提供支持的纯 CSS 图标解决方案
        presetIcons({
            // 与当前字体大小 (1em) 相关的比例。
            scale: 1,
            // 生成的 CSS 图标的模式。
            mode: 'auto',
            // 用于匹配图标规则的类前缀。T
            prefix: 'i-',
            // 应用于生成的 CSS 的额外 CSS 属性。
            extraProperties: {},
            // 当匹配缺失的图标时发出警告。
            warn: true,
            // 在 Node.js 环境中，预设会自动搜索已安装的 iconify 数据集。在浏览器中使用时，提供此选项以提供具有自定义加载机制的数据集。
            collections: {
                // 当使用捆绑器时，您可以提供集合，dynamic imports以便它们将作为异步块捆绑并按需加载。
                // carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
                // mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
                // logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
            },
            // 规则层。
            layer: 'icons',
            // 自定义图标定制。
            customizations: undefined,
            // 当检测到用途时自动安装图标源包。
            autoInstall: false,
            // 自定义图标单元。        
            unit: 'em',
            // 从 CDN 加载图标。应以 https:// 开头并以 / 结尾。
            cdn: undefined,
            // 预设使用 ofetch 作为默认的 fetcher，你也可以自定义 fetch 函数来提供图标数据。
            customFetch: undefined,
            // 字符串化之前的 CSS 对象处理器。
            processor: undefined,
        }),
        // 为其他规则启用 Attributify 模式
        presetAttributify({
            // 仅为属性或类生成 CSS。
            strict: false,
            // 属性化模式的前缀。
            prefix: 'un-',
            // 仅匹配前缀属性。
            prefixedOnly: false,
            // 支持匹配无值属性。
            nonValuedAttribute: true,
            // 提取时要忽略的属性列表。
            ignoreAttributes: [],
            // 如果 DOM 中表示的实际值为 true，则非值属性也将匹配。此选项用于支持将非值属性编码为 true 的框架。启用此选项将破坏以 true 结尾的规则。
            trueToNonValued: false,
        }),
        // 排版预设
        presetTypography({
            // 使用排版实用程序的类名。要撤消元素的样式，请使用 not-${selectorName}（默认情况下为 not-prose）。
            selectorName: 'prose',
            // 使用 CSS 声明块扩展或覆盖 CSS 选择器。
            cssExtend: {
                // 'code': {
                //     color: '#8b5cf6',
                // },
                // 'a:hover': {
                //     color: '#f43f5e',
                // },
                // 'a:visited': {
                //     color: '#14b8a6',
                // },
            },
            // 兼容性
            compatibility: undefined,
        }),
        // 网络字体（Google Fonts 等）支持
        presetWebFonts({
            // 网络字体的提供商服务。
            provider: 'google',
            // 字体。
            fonts: {
                // sans: 'Roboto',
                // mono: ['Fira Code', 'Fira Mono:400,700'],
                // lobster: 'Lobster',
                // lato: [
                //     {
                //         name: 'Lato',
                //         weights: ['400', '700'],
                //         italic: true,
                //     },
                //     {
                //         name: 'sans-serif',
                //         provider: 'none',
                //     },
                // ],
            },
            // 扩展主题对象。
            extendTheme: true,
            // 主题对象的键。
            themeKey: 'fontFamily',
            // 内联 CSS @import()。
            inlineImports: true,
            // 使用您自己的函数来获取字体源。
            customFetch: undefined,
        }),
    ],
    // 代码转换器到用户源代码以支持约定
    transformers: [
        // 用于 CSS 指令（例如 @apply）的转换器
        transformerDirectives(),
        // Windi CSS 变体组功能的 Transformer
        transformerVariantGroup(),
    ],
    // 排除设计系统选择器的规则（以缩小可能性）。结合使用 warnExcluded 选项也可以帮助您识别错误用法。
    blocklist: [],
    // 始终包含的实用程序
    safelist: [],
    // 对生成的实用程序对象进行后处理
    postprocess: [],
    // 变体分隔符
    separators: [':', '-'],
    // 始终应用的默认提取器。默认情况下，它会用空格和引号分割源代码
    extractorDefault: (await import('@unocss/core')).extractorDefault,
    // 定义自定义的自动完成建议
    autocomplete: {
        // 自定义函数/模板提供自动完成建议
        templates: [],
        // 自定义提取器来拾取可能的类并将类名样式建议转换为正确的格式
        extractors: [],
        // 自定义简写以提供自动完成建议。如果值是一个数组，它将与 | 连接并用 () 包裹
        shorthands: {}
    },
    // 可提取作为公用设施用途的来源选项
    content: {
        // 除了其他内容源之外，还要从文件系统中提取 Glob 模式。 在开发模式下，文件将被监视并触发 HMR
        filesystem: [],
        // 要提取的内联文本
        inline: [],
        // 过滤器用于确定是否从构建工具的转换管道中提取某些模块。 目前仅适用于 Vite 和 Webpack 集成
        pipeline: {
            // 过滤正在提取的文件的模式。支持正则表达式和 picomatch glob 模式
            include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/],
            // 过滤未提取的文件的模式。支持正则表达式和 picomatch glob 模式。 默认情况下，还会提取 node_modules 和 dist
            exclude: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/],
        },
    },
    // 钩子用于修改已解析的配置。 第一个预设首先运行，然后是用户配置。
    configResolved: undefined,
    // 从配置文件加载。 设置为 false 以禁用。
    configFile: false,
    // 也会触发配置重新加载的文件列表
    configDeps: [],
    // UnoCSS CLI 选项
    cli: {
        // UnoCSS cli 入口点
        entry: [],
    },
    // 快捷方式的布局名称
    shortcutsLayer: 'shortcuts',
    // 环境模式
    envMode: 'build',
    // 公开内部细节以进行调试/检查
    //details: false,
    // 当匹配的选择器出现在阻止列表中时发出警告
    warn: true,
})